web6047 2022年 ５月

web6047 2022年 ５月

プログラミングやRPG（作るほう）が好きな人の日記

2022/5/30（月）

「電子機器組立て2級　暗記ツール」の説明に追記しました

このページの上の部分に「電子機器組立て2級　暗記ツール」というページへのリンクがあります。

そのリンク先の説明に、少し追記を行ったので、もしも利用している方がいたら読んでください。

ページの先頭に以下の１つの小題で、説明を追加しています。

• このツールを作ることになった経緯

2022/5/28（土）

web6047 管理者近影

念のため言っておきますが、管理者近影はこの記事内に２つあります。

毎日部屋の中にいて、プログラミングやったり、寝てたり、資格の練習してたり、それだけだとダメだなと思って、いつも「散歩に行かないと」と思っています。

それで今日は、いつもの 海岸の崖の上の公園 を散歩しました。

「海岸の崖の上の公園」とは下図のような場所です。

▼そこから海を撮影。いつもの景色。

▼公園は一部、小さな丘があって、写真はそこから撮影しました。丘の上には正方形の大きなベンチ（テーブルみたいな）があります。

このあと、ページを下へ進めると、素人のドアップの顔写真が出てくるので、ある程度ストレスになることをご承知ください。

▼「プログラマーにとってはこれが必要だ」と言いながら、正方形のベンチにねっころがり、日光浴をしました。こんなふうに。

▼「これが必要なんだ…」と。　　…そして、カメラを反対側に向けて…

▼ついでに、私の顔も撮影。「私のWeb ページ訪問者にはこれ（管理人の素顔）が必要なんだ…」と。　　ひつようねぇって？

※最近、ちょっと 病気がち なもんですから

これで何人か、このＷｅｂ ページを去る人もいるかもしれませんが、まいっか と。

▼丘から降りてもう１枚撮影。

▼あの雲、何に見えますか？　創作する人にとって必要なことは、「想像力」です。左側が割れているのが特徴的だけど、何に見えるかは難しいですね。

わかった！！　にゃんこを上から見たところ！　だな！

▼このように図形を置き、（Microsoft Excel を使用 ※１）

▼図形を、加工して、、こんな感じか。クロネコにゃんこ。と黄色いのは猫用のよくあるおもちゃ。

▼にゃんこを上から見たところ、でしょ。

▼でも、写真から猫図形を取り出してこちら側に回転してみたら意外とゆがんでいたので（下図左）、調整してみました（下図右）

やっぱり上図右の足の感じは、実際の猫の生活の様子を知っていないと描けないな、と思います。この絵が上手かどうかは別として。

なので、知りもしない RPG のシナリオの「ドラマ」を描くのって、基本的には無理なんじゃないかと思います。

▼で、今回の記事の題名にもなっている「管理者近影」。将来もっと身体の調子が悪くなって状態が悪くなると、もっと悪くなるだろうな。

※部屋が汚いですが、この写真は「クリッカブルマップ」になっていて、調べたいところをクリックすると、説明（いいわけ）が出てきます。点線部分以外も一部クリックできます。（スマートホンはタッチ）

私の生活の９割以上は上の写真のような私ではなく、ほとんど人に見せられないような姿で生活しています。

あと、いつも言っていますが、私が「ベンチの上でねっころがっていた」と言った時の図の「私」の図。

構図として妙にリアルな感じがしますが、バラすと Excel の図形の集まりなんです。一部、手のひらと髪の毛だけいじっていますが、それ以外は Excel のプリセットの基本図形です。

やっぱり、絵っていうのは、基本的に単純な図形の集まりですね。

絵が描けない人は、まずは単純な図形の集まりの状態で、どこまで表現できるかがひとつのステップになっていると思うんです

それを飛び越して、服のしわとか、身体のパーツが組み合わさっている部分の複雑な肉の様子とか描いてしまうと、苦しくなるんじゃないでしょうか。もちろん服のしわや肉の形を興味を持って練習するのは良いことなんですけどね。

難しいですね。

2022/5/27（金）

自分探し

「自分探しってどうやるのか」っていう話題が某所であって、

私にとって「これが私だ」と言えるものを探したら、、

この本の山と、上に乗っている犬（本当は猫があれば猫が良い）が「自分」と言えるものです。

パソコン関係のいろいろな本と、犬猫など世話をする私のことを慕ってくれる動物たち。それが私（自分）なんじゃないかなぁ。子供を持っている人は「子供が自分」って思うかもしれない。血がつながっている子も、養子も、ペットも、親子関係は愛せば愛すほど「自分だ」って言うかもしれません。

• 何かに夢中になっていること。
• 「あなたらしい」と言われること。

そういう状態が「自分を見つけている」と言うんじゃないかな。

それか、

本来するべき仕事に就いた時、「自分を見つけた感じがする！」と思うかもしれません。

私だったら、ゲーム会社で、ある１つのゲームを作るためにまい進するような将来があったら、そのときそう思うかもしれません。

「私にはそれしかないから」と言って「スイートなお菓子や、おいしい食べ物を食べること」しか取り柄がないと言っている人は、それが「自分」なんでしょうね。

手にモノづくりをする道具を持っている人、手にお菓子を持っている人、手に生ビール中ジョッキ（３９０円）を持っている人。

自分探し…、若い人ほど問題になりがちだなと思います。

2022/5/22（日）

Electron （エレクトロン）

エレクトーン（電子ピアノ）じゃないですよ。

インターネットの JavaScript や CSS の機能を、Windows などの OS 上で、インターネットブラウザなしで使えるようにする仕組み「Electron」。

いつも私が作っている JavaScript のプログラムを Electron で動かしてみました。

実行を試す：

• インターネットブラウザの場合はここをクリック（通常の HTML として動きます）
• Electron の場合
  
  • Windows 32bit（test-win32-ia32.zip、80MB）ダウンロード
  • Windows 64bit（test-win32-x64.zip、85MB）ダウンロード
  • MacOS 64 bit（test-darwin-x64.zip、424KB）ダウンロード
  • Linux 64bit（test-linux-x64.zip、79.4MB）ダウンロード

ダウンロードしたら次のように実行してください。

1. ダウンロードした zip ファイル を展開する。
2. 展開してできたフォルダの中で、
   Windows なら、test-win32-x64 フォルダや、test-win32-ia32 フォルダを開きます。
   MacOS も Linux も、ZIP を解凍した、それぞれのフォルダを開きます。
3. すると、
   
   • Windows の場合は、32bit版も、64bit版も、大量のファイルがありますが、その中の test.exe を実行します。
     すると、たぶん「発行元を確認できませんでした...」と表示されます。私を「悪人ではない」と信じるなら、なおかつ、送信されるデータが改ざんされていないだろうと思うなら、 実行 ボタンを押してください。
     しばらく待つと、「インターネットブラウザの場合」とまったく同じ画面が出ると思います。
   • MacOS の場合は、test.app というフォルダがあります。これを？どうするんでしたっけ…。わかりませんけど、アプリケーションフォルダに入れるなどするんでしょうか。
     でも、MacOS のみ Electron の作成がうまくいかなかったっぽいので、動かないかもしれません。
   • Linux の場合は、うーん、知らんわ。自分でディレクトリを作ってコピーをするとかなのかな？

Electron はインターネットブラウザなしで、OS 上で WEB 技術を実行させることが出来る、というものです。

その様子を今回の test のアプリで見てもらえればと思います。

なお、表示された Electron のウィンドウをリサイズすると、リサイズに合わせて、「センタリングされたり」、「拡大されたり」しますが、それは Electron の機能ではなく、私が作成した JavaScript による機能です。

実は Electron をやりたくて Electron を始めたのではなく、もともとは「Yahoo! 知恵袋」で

「TypeScriptってまじで最強だと思うんですが違うんですか？」

というマジ質問があって、それに私がマジ回答したのが始まりでした。（その知恵袋のページ）

回答するために、TypeScript の開発環境を作ろうとしました。

TypeScript の前に node.js が必要とのことで node.js をインストール。

そして、node.js のインストールフォルダにある npm（パッケージマネージャー）というコマンドを使って TypeScript をインストール。

TypeScript の入門サイトを見ながら（入門者なのに回答しちゃっていいんですか?）、TypeScript でサンプルのプログラムを作り、TypeScript の tsc というコマンドを実行すると、「コンパイル」という形で、その生成物として JavaScript ファイルが作成されました。

「tsc」とは、TypeScript Compiler の頭文字なんでしょうね。

生成された JavaScript ファイルは、node コマンドで Windows 上で実行することもできるし、ブラウザでいつものように読み込ませることもできました。なるほど。

TypeScriptってまじで最強？

TypeScript は JavaScript の上位互換で、TypeScript の中で JavaScript をそのまま書けるのでこれまでの JavaScript のライブラリがそのまま使えるそうです。そして、JavaScript にはない変数の型指定ができます。

だから最強？

でも、

• TypeScript は Microsoft が作ったプログラミング言語なのであって、Mozilla やほかの会社が認めるのかどうか。
• JavaScript を勉強したのに、さらに TypeScript も追加で勉強しなくてはならない。
• 少しインストールが複雑な印象がある。

そのあたりで、広まるには時間がかかるんじゃないかなぁと思いました。

なので、機能としては最強かもしれないけど、現実問題として、最強の座をほしいままにできるのかどうかは別になりそうです。

で、知恵袋の話はそれで終わりで、node.js を使って Windows 上で JavaScript が実行できるのなら、「CANVAS を表示させたい！」と、個人的に思いました。

ちょっと調べて、node-canvas を試しましたが、どうも、画面は表示されず、暗黙的に画像を編集することしかできないものみたいでした。

うーーーん、と思って、そういえば、ちょっと前に、HTML の内容をデスクトップアプリケーションに変換する何かがあったはず…

と思って、そーだ！「Electron」だ！と思い、それで今回 Electron を使い始めた、というわけです。

Electron を導入していて、「わくわくするような、とても楽しい感じ」がしたんですが、

ブラウザ上で作ったものを、わざわざ別の形にして提供するのは、同じことの繰り返しなんじゃないかという気がしました。

前例で言うと、WEB サービスでやりたいことは全部できているのに、わざわざ同じ内容のサービスを スマートホンのアプリの形で提供する、、というものがいくつかあると思います。Yahooアプリとか。

Electron もそれと同じにならないかなとちょっと思いました。

この記事の冒頭で提供した test アプリのブラウザ版と Electron アプリ版を見て、ほとんど同じ内容だったと思います。

でも考えてみれば、ゲームソフトを Electron で提供する場合、

• ネットにアクセスせずに、そのゲームを遊ぶことができる
• ネットのトラフィックでゲーム内の画像などのロードを待つことがない

などなど、その辺で利点があるのかもしれません。

Mozilla Firefox について

インターネットブラウザの Firefox を使っていて、処理が重たいなと思ったら、私は CTRL + ALT + Y を押して、Firefox を再起動します。

このショートカットキーは、私が独自に作成したもので、みなさんのパソコンで同じキーを押しても再起動は起こりません。

以下の黒い部分に示したような内容で、.bat 形式のテキストファイルを作り、さらにそのショートカットファイルを作り、そのショートカットファイルのプロパティのショートカットキー: という項目で上記キーの組み合わせを押し、OK ボタンを押してプロパティ画面を閉じます。そのショートカットファイルをデスクトップに置くと、いつでもどこでもそのショートカットキーを押せば、.bat 形式のテキストファイルに書いた内容を実行してくれます。（いつでもどこでも、なので、ショートカットキーはどのアプリケーションも使わないような複雑な組み合わせにします）

なお、下記の %firefox% の部分は、firefox.exe のパスが入ります。たとえば、C:\Program Files\Mozilla Firefox\firefox.exe などです。

そして、本題ですが、ショートカットキーを押して Firefox を強制終了する前の状態が、下図の画面左のグラフの左半分のディスク１００％状態になっている部分です。ショートカットキーを押した瞬間にグラフの右半分の状態になりました。明らかに Firefox がパソコン全体の処理を重たくしていた張本人なのがわかります。

Firefox バージョンは 2022年5月22日 時点最新の Windows用 ver. 100.0.2 64bit版 です。

私が使っているパソコンは、2011年発売の acer 3830t（リンクは 価格.com へ）という機種で、

core i5 (2.3GHz)、メモリは 4GB から増やして 6GB、ディスクは SSD ではなくハードディスク

なので、パソコンの処理速度が遅いことが原因で上記のようになっている、とも言えそうですが、どうなんでしょうか。

私以外にも同じような症状で困っている人っているんじゃないかなぁ…

最近 Firefox はいろいろな企業から「サポート対象外通告」を受けているし、私個人としては「もうダメなんじゃないかな」とたびたび思います。

でもそれでも Firefox を使い続けるのは、

• インターネットがこの世に出始めたころの Netscape Navigator というブラウザの後継だから。
• Google chrome やその他のブラウザは、個人的にあまりなじめないから。

の2点かな。

それで、これからの Firefox に求めることは、

• ときどき猛烈な量のディスクアクセス（上図）を行うが、それが何なのか知らせてほしいのと、それを止めるオプションを用意してほしい。
• 企業からの評判が悪いので、対応してほしい。

の2点。

あとできれば、Firefox ではなく、Netscape Navigator という名前に戻してほしいな。

猫

昔飼っていた猫の回顧録です。

お弁当屋さんのお姉さん

私がお弁当屋さんの前を通ったら、まだ子猫の状態の上の2匹がいました。

可愛いと思ってかまっていると、お弁当屋さんのお姉さんがお店から出てきて、

「飼えませんか？」

と聞かれました。

飼えないんですけど、私が持っているパソコン関係の一式を売りさえすれば、、って考えたんだっけなぁ、、

それで段ボールに子猫2匹を入れて家に持ち帰りました。

私が台所の流しでジャーっと水を流して皿洗いを始めると、連れてきた子猫たちが「わーい」という様子で私の足元に寄ってきました。

でもそれが、楽しく優しいお弁当屋さんのお姉さんではなく無骨な男の私だったので、それに気づくと「あっ、ちがう…」という様子で しょぼんと後ろを向いて去っていきました。

たぶん、お弁当屋さんでもお姉さんが流しでジャーっとやっているのをいつも聞いていたんでしょうね。

鈴の音

写真の通り、外で放し飼いにしていたんですが、彼らが外へ遊びに行っていて、どこにいるかわからないとき、私が鈴の音を「リンリーン、リンリーン」と鳴らしながら近所を歩くと、物陰からヒョコっと顔を出し、2匹とも私のところへ寄ってきます。

そしてそのまま家に帰り、「ごはん」の時間となります。

グルメ

猫のご飯と言えば、カリカリのキャットフードか、レトルト生タイプのパックのどちらかだと思います。

あるとき、刺身とか焼き魚をほぐしたものを与えたらだいぶ喜んで食べました。

その次のご飯の時間になると、「ごはんだわーい」と猫たちは猫のお皿に向かうんですが、お皿に何が乗っているかを知ると（キャットフードが乗っている）、動作が遅くなり残念そうにノロノロとお皿から離れて、

「あのう、これ、食えないんですけど？」

という感じになりました。

人間も同じですね。毎日甘いお菓子を食べていると、いきなりせんべいを渡されても「なにがうまいのか」と思ってしまいますよね。

なお、猫にお刺身を食べさせるときは、そのままの切り身を出してしまうと、噛み切れず、飲み込むしかないので、「まぐろのたたき」のようにミンチ状にしてから出してあげると喜ぶんじゃないかと思います。

また、焼き魚をその姿のまま出してしまうと、「野生の本能が目覚める」という現象が発生するのではと個人的に思っています。一度野生が目覚めると直せないので、試しでも何でも焼き魚の姿出しはやらないでください。なので、ほぐして出すようにします。

さらに5匹の猫

近所の大きめの公園のトイレ付近を歩いていると、箱に入った5匹の子猫がいました。

子猫以前の、おなかから出た直後みたいな毛も生えていない子猫でした。

これは、と思って、なんでか、私は（2匹すでにいる）家に持ち帰り、5匹とも元気がないので動物病院に連れて行きました。

そこで動物のお医者さんが、少しあきれた様子で、

「（私の名前）さん、しかたないですよ。無理ですよ（一人の人間が可愛そうだからと言って次々と猫を拾うものじゃないし、将来どうなるか想像できない）」

それで、元気がないことについては、注入器を使って口の中に「ブドウ糖」を入れてやれば…とお医者さんがそうすると、途端に5匹の猫たちは立ち上がり、「ギャーギャー」と言って何かを求めて動き始めました。まるでラジコンの車に乾電池を入れたかのように。

その後、どうしようもなくて、5匹とも死んでしまい、庭に埋めてあげました。

今思えば、やはり、猫屋敷になる瀬戸際でもあったと思います。

「可愛そうだから」というのは、間違いなく「1回か2回まで」といった「限度」があります。

この件の一番の解決は、「最初の飼い主が親猫の避妊手術を行って、5匹の子猫の誕生を予防するべきだった」、ということだと思います。

その辺は多くの人々の間で周知されていなくて、生まれた '面倒な' 子猫をビニール袋に入れてゴミ捨て場に捨てる人もいます。無責任もそうですがそれ以前に多くの人は「無知」なんです。学校で教えているわけでもなく、親が子に教える義務の中にも入っていないので、知らないのは仕方のないことでもあります。

猫の飼育の本をしっかり読んだ私も、避妊や去勢をするときには、「自然のものに対して、かわいそうだ」と確かに思ったので、それをやらない人がいるのも無理もないと思います。でも、「かわいそう」よりも、「猫屋敷の回避」のほうが優先順位が上みたいです。

まぁ、以上は私のちょっと恥ずかしい話かな。

猫との会話は成立する

（前にもこのＷｅｂ ページ上で同じ話はしました）

私が寝床で寝ていると、猫（ミケ）が横に来て「ニャーーン」と一言鳴きました。

私は「わかったよ」と言って起きて、窓を開けてあげました。

すると猫は外へ遊びに行きました。

そのあと、私は寝床で呆然としてしまいました。

なぜなら、「ニャーーン」と鳴いた時の猫の顔が、人間の子供が大人に何かお願い事をするときの顔と同じだったからです。

意思の疎通は、怒ると遮断されます。それは人間も同じです。

あんまりきつい怒り方をする人と話をするときは、話の内容が しどろもどろ になって、なかなか言いたいことを伝えられないものです。

友達にならサラっとあっさりと伝えられるのに。

その人の怒りを恐れて、自由な意思の表現が出来なくなっているからです。

私は猫たちには たとえば食卓の上に乗ったとしても怒らなかった（少し時間をおいてから優しく降ろしました）ので、意思の疎通がしっかり開通していて、それで猫は意思を私に伝えることが出来たんだと思います。

一度でも怒ってしまえば、それは記憶に残ってしまい、なかなか直せなくなります。

それはきっと動物も人間も同じなんでしょうね。

死んじゃっても悲しくない

（前にもこのＷｅｂ ページ上で同じ話はしました）

2匹とも1年か2年で死んじゃいましたが、1年目は灰色のほうが死んじゃいました。

怪我をした鳥がいて、私がかくまっていたんですが、それを灰色にゃんこがもてあそぼうとしたので、つい大きな声で「ダメっ」と怒ってしまいました。

それが原因だと私は信じていて、きっと灰色にゃんこは怒られたことにムシャクシャして、庭の植物の肥料を猫の餌みたいに食べて、それで死んでしまったんじゃないかと思います。

家の外の裏手の暗いところで鼻から血を流して死んでいましたが、そのときは私は玄関に連れて帰り、結構泣きました。

その様子をミケは横で一緒に見ていました。何が起こったのかはわからなかったようです。

2年目はミケが死んでしまいました。

外には近所の白いボスネコがいてそれが結構怖くて、しかも友達の灰色にゃんこもいないので、心細くて、私に何度も「ニャーン」と訴えてくるんです。私はどうすることもできないので「いつまで泣いているの！」と怒ってしまったんです。これもそれがにゃんこが死んだ原因だと私は信じています。今まで一度も怒らなかった私が怒ったんですから。灰色にゃんこにも一度も怒ってこなかった。

家の庭で死んでいて、やはり家に連れて帰りましたが、私は少しも悲しくなかったです。

いつものようにスクーターバイクに乗って、電気屋のゲームソフトのテストプレイコーナーで、カプコンのゲームで遊んだりして、

「大事な猫が死んだというのに、悲しくないのか、なんで遊べるんだ？」

と、平然としている自分は頭がおかしいのかと不思議に思いました。

ペット霊園へ連れていき、これから火葬しようというときに、ミケの身体をなでたら、それが可愛くって、

まだ可愛がれるから、焼かないでほしい、と誰にともなく頼みました。

私は昭和の男なので、そう簡単に人前で泣きはしませんが、泣くのを気合を入れて我慢したら、その後猛烈に身体の具合が悪くなりました。

泣くという身体の自然な生理現象を無理やり止めるのは、なるべくやめたほうが良いみたいです。

でも、あとで身体の具合が悪くなってもいいから泣くところを人に見せたくはない、というのならそれも良いと思いますが。

わかりませんが、私は猫の身体をなでることで、深い愛情を感じていたのかもしれません。

人間とのかかわりが少ない私は、猫たちによって、愛を教えてもらったのは確かです。

以上、昔飼っていた猫たちとの生活の回顧録 でした。思い付いて書くことにしました。

ほかに、電子機器組立ての資格の練習や勉強をしなきゃならないのに。取り組む気あるのかな？

身体の具合が悪くて、休職して、国から傷病手当をもらって、生活費が足りているのか足りていないのかわからないような生活をしているんですけど、一体何をやっているんだか、と思います。

2022/5/11（水）

花

日陰で撮影したせいか、見栄えがしませんが、毎年毎年、花盛り。

子供はアニメやゲームのことばかり考えていて、花の美しさに興味はまるでない。

大人は花の美しさを知っている。魅力に引き付けられるところがある。

いつその魅力を知ったんだろうなぁ…。

2022/5/9（月）

お話３点

おは梨１点

母の日に贈り物を送ったら、母は喜んでいました。

どうして母の日に贈り物をするのかと言うと、

年を取るとそういうのが必要なんじゃないかと思うんです。

なんらかの人間関係で傷つくと、若いころよりも傷が深くなるだろうし、

老化で寿命が近づくと、心細くもなる。

子供が数人いるのに、みんなどこかへ行ってしまい、あんまり目を掛けてくれないとそれもまた寂しいかも。

まぁ、そんなところです。

おは箸２点

なんだっけ、コロナウイルスの三回目接種をこの前、５／６に接種してきました。

3回ともモデルナ製で、翌日と翌々日は案の定、ダウンしていました。

わかっていたので寝床に、ロキソニン、ひえぴた、水分、リポビタンＤ、おかし、パンなどなど

完全装備にしていました。使ったのは、水分、リポビタンＤ、おかし、パン、でした。

私はロキソニンとひえぴたを使うほどではありませんでした。

今は回復しています。

お那覇市３点

え？どれも題名が「お話」になってないって？　まったく、お話になりませんな？

あと、またプログラムを作っていました。

これ

以前から何度も公開している、「モザイク」効果を試すプログラムです。

「CANVAS 要素の属性」と、「CANVAS 要素の STYLE」、「CANVAS コンテキスト」の、これら３つの、ある画面設定をうまく調整すると、おなじ描画なのにモザイクにすることが出来ます。

その辺をあいまいにして話を進めてもつまらないと思うので、詳しく書いておきます。

JavaScript によるモザイク処理のやり方：

説明の前に：

• HTML と CSS の仕様として、CANVAS のサイズには、CANVAS タグの「属性のサイズ」と、CANVAS タグの「スタイルのサイズ」の２種類があります。たとえば、
　<CANVAS width="256" height="224" style="width:512px; height:448px;"></CANVAS>
  といった具合です。　
  属性のサイズ（緑部分）は、CANVAS 画面の「ピクセルの数」を表し、スタイルのサイズ（オレンジ色部分）は CANVAS 画面の「見た目の寸法」を表します。
  いわば、属性のサイズは、パソコンモニタの解像度のようなもので、スタイルのサイズはパソコンモニタの何インチとかの大きさのようなものだと言えば、混乱がなくなるでしょう。
  
  今回の説明の中では、この属性のほうを、
  
  　cc.canvas.width, cc.canvas.height
  のように緑色で色分けし、スタイルのほうを、
  
  　cc.canvas.style.width, cc.canvas.style.height
  のようにオレンジ色で色分けします。
  （なお、cc.canvas は CANVAS 要素です。CANVAS コンテキストが便利に CANVAS 要素をそのようにセットしてくれています）
• また、プログラムや説明の中で出てくる「 cc 」は「CANVAS コンテキスト」です。
  よく変数名で ctx とか書かれますが、私は cc のほうが楽なので…

それではモザイク処理のやり方です。

変更前のプログラムについて：

最初の JavaScirpt プログラムが　これ　だとします。

画面に大きな○が描かれています。

このプログラムに変更を加えて、モザイクにしていきます。

そのプログラム内で変更を加える予定の箇所には

//1
//2
//3

のようなコメントが入っています。

この数値は以降の手順番号と対応しています。

プログラムリストを表示

変更後のプログラムについて：

変更後のプログラムは　これこれ　です。

4ドットの軽いモザイクがかかっています。

プログラムリストを表示

なお、変更後のプログラムをダウンロード（右クリック→名前を付けて保存など）する、または、これこれのリンク先を表示後、右クリックしてページのソースを表示等して、横に置きながら次の手順を読んでいただくと良いかなと思います。

▼たとえば、こんな感じでウィンドウを並べて

モザイク手順：

1. まず、CANVAS の属性のほうのサイズである cc.canvas.width と cc.canvas.height はモザイク機能のために 以後、使えなくなる ので、cc.canvasWidth と cc.canvasHeight に値のコピーを取っておきます。
   以後は cc.canvasWidth と cc.canvasHeight を使用して canvas のサイズを参照するようにします。
   canvas コンテキスト内に勝手に新しい変数を追加するのは、少々ルール違反なので覚えておいてください。
   //1
cc.canvasWidth = cc.canvas.width;
cc.canvasHeight = cc.canvas.height;※この手順だけで心が離れる方もいるとは思いますが。
2. つぎに、canvas の style のほうのサイズを次のように設定します。
   これにより、属性のほうのサイズ canvas.width, canvas.height が今後どのような値になろうとも、初期の見た目のサイズを維持してくれます。（ブラウザはサイズの決定としては style のほうを優先するみたいなので）
   //2
cc.canvas.style.width = cc.canvasWidth + "px";
cc.canvas.style.height = cc.canvasHeight + "px";
3. 仮に、モザイクのサイズを「４ピクセル」にしようという場合、
   「もともとのサイズ cc.canvasWidth, cc.canvasHeight  を、モザイクのサイズで割った値」を、属性のほうのサイズ cc.canvas.width, cc.canvas.height に代入します。
   //3
mosaic = 4;
cc.canvas.width = cc.canvasWidth / mosaic;
cc.canvas.height = cc.canvasHeight / mosaic;４で割るということは、CANVAS の属性のサイズ（ピクセルの数）が １／４ になるということです。
   でも見た目のサイズは style のほうで もとの見た目の大きさを維持してくれます。
   つまり、「見た目の大きさは同じで、ピクセルの数だけが減る」、という結果になります。
   
4. 以上でもモザイクっぽくなりますが、画面内のピクセル数は減っており、今までの描画はそのピクセルに合わせて描画されるので、拡大されて描画されてしまいます。（虫眼鏡で左上の一部（１／４）だけを見ている描画となる）
   
   ※この図の右側の円（の一部）は本当はピクセルに合わせてゴツゴツしています）
   
   そこで、cc.scale() メソッドを使用して、１ピクセル（１単位）について、
   
   「既定では、キャンバス上の 1 単位は正確に 1 ピクセルです。」（MdN scale()より）
   
   となっているところを、その１単位を １/ 4 ピクセルへ細分化します。
   //4
cc.scale( 1 / mosaic, 1 / mosaic );
   これは物理的な１ピクセルを４で割って（縦横４で割って）、論理的に４×４ピクセルとして動作させるということです。
   言い換えれば、「座標としては4分割された」、ということです。（ちょっと説明が不適切かな…最後のほうで別の切り口で再度説明します）
   
   
   
   １つ前の手順でピクセルは大きく４倍に引き伸ばされました。そしてこの手順では、座標として4分割されます。
   その結果、「ピクセルは荒いけど座標の細かさは同じ」という状態になります。
   だから同じ描画内容を、粗いピクセルで（モザイクで）描くことになります。
   
   
   
   まぁ、なんというか、見た目は style で固定して、画面のドットの量は CANVAS の属性で減らし、その結果ドットの粗い画面になるけど、座標軸が変わるので、scale() を使って直した。というわけです。
5. それから、もし、もともとの描画内容で、CANVAS の属性の canvas.width, canvas.height を参照していた場合、cavasWidth, canvasHeight を使うよう、変更します。
   canvas.width, canvas.height はモザイクのために小さな値になっており、そのまま使うと「画面全体を消去したいのに、画面の左上一部しか消去されない」という結果になってしまいますので。
   //5
cc.beginPath();
cc.arc( cc.canvasWidth / 2, cc.canvasHeight / 2, cc.canvasHeight / 2, 0, 6.29 );
cc.closePath();
cc.stroke();
6. そして最後に、このままだと、画面が（ハードウェア・アクセラレーションにより？）ドット補間されて、にじんでみえるので、ドットのままギザギザに表示するように設定します。
   //6
cc.canvas.style.imageRendering = "crisp-edges";

以上の変更をほどこしたものが

これこれ　（※上記冒頭のこれこれと同じ）

です。4ドットのモザイクになっています。

この４ドットという数値を動的に変更できるようにしたバージョンは

これ

です。

なお、cc.scale() について理解が難しいので、別の切り口で再度説明します。

まず初期状態。 図の説明： ・赤い枠が style によるサイズ指定（画面の大きさ）。 ・裏にある青いマス目は座標系。 ・青い座標系上の赤い点線の円は描こうとする図 ・緑の線は画面のピクセルと座標系のピクセルとの対応を示している。 初期状態ではピクセルと座標は１対１で対応しており、描こうとする図はそのまま画面に描かれる。	手順３を行った状態。 mosaic = 4; cc.canvas.width = cc.canvasWidth / mosaic; cc.canvas.height = cc.canvasHeight / mosaic;CANVAS の属性のサイズを、最初のサイズの１／４にした。 その結果、 属性のサイズ（ピクセルの数）が減ったので 描こうとする図は左上の１／４のみになる。 一方、style のサイズ（画面の大きさ）は変わらないので、ピクセルが引き伸ばされて表示される。	手順４を行った状態。 cc.scale( 1 / mosaic, 1 / mosaic );を行った。 その結果、 MdN の言葉を借りると「キャンバス上の１単位は１／４ピクセル」になった。 まぁ、わかりやすくガンダムでたとえると、「実物大ガンダムに比べて１／１４４スケールでプラモデルを作り、手のひらに収まった」というのと同じように、「手順３に比べて１／４スケールで描画し、画面内に収まった」と言えます。
		座標上の細かさは、画面上のピクセルと必ずしも一致しない、cc.scale() で操作される、ということに注意してください。

上表の右端の図で、青い座標系に、アニメキャラなどの画像が置かれた場合、座標上の４×４ピクセルに対応する画像の４×４の画素は、その各色がブレンドされて１色になり、画面上の大きな１ピクセルにその色で描かれるということになります。（モザイク）

以上、モザイク処理の詳細でした。

何の話だっけ？

「モザイク」効果を試すプログラムの紹介をしているところでした。しかもお話３点の３つ目。

今回はモザイクをしたいアプリケーションと、モザイクを行うプログラムを完全に分離して、アプリケーションから見てモザイクのプログラムは完全に外部の装置のような物、というコンセプトでプログラムしました。（そのつもりです）

これはたとえば、ゲーム機をテレビＡにつなぐとぼやける。テレビＢにつなげるとくっきり。というような、ゲーム機自体に変更はないけど、つなぐ画面によって表示が変わるといった感じです。テレビとゲーム機に ゲームの内容を変更するような関係 はありません。（依存関係がない）（今回はそうしたつもりだけどあまり自信がありません）

そうすると何が得なのかと言うと、モザイクの機能を別のプログラムで再利用しやすい、というのと、メインプログラムの中にモザイクのプログラムがなくなるので、メインのプログラムの見通しが良くなる（とってつけたようなコブみたいな部分がなくなり、すっきりとする）、という良さがあるのかな？

また別の話ですが、ウィンドウをリサイズすると、画面を拡大縮小しますが、その拡大縮小を「整数倍限定」にしています。

整数倍限定にすると、CSS で image-rendering : crisp-edges にしたときにフォントが汚くなるのを防ぐことが出来ます。

▼左：自由な拡大（ドットの拡大率がドット毎に均一ではない）、右：整数倍の拡大（すべてのドットが均一に拡大）※B

▼なお、CSS の image-rendering : crisp-edges を削除すると、両方とも同じ感じになります。でもぼやけてしまう。ジレンマじゃのう。

▼でも「画面の拡大」や、「crisp-edges」をあきらめれば、CANVAS はもともとはこのような綺麗な描画を行ってくれます。

このように、「crisp-edges」を使って「レトロゲームのようなドットの粗さを楽しみたい場合」は、上図※Bの「整数倍の拡大」がベストです。

余談：

（私は説明が長いし、余談もまた長い！）

CSS の object-fit が結構便利なので、今回は object-fit を導入しようとして期待していたんですが、結果は

これ

でした。画面サイズがグラグラと変化します。

原因を考えました。

もともとの CANVAS のサイズが、512 * 448 で、縦横比が 512 / 448 =1.142 になります。

モザイク処理では、CANVAS のサイズをいじります。モザイクの大きさがたとえば 3 ピクセルだとすると、

横512 / 3 = 170.666　（※ちなみにこの小さくなった画面を CSS のほうで引き伸ばすからモザイクになります。それだけではありませんが。）

縦448 / 3 = 149.333

この時点では、縦横比は、170.666 / 149.333 = 1.142 で同じになります。

ところが、この計算結果を、

cc.canvas.width = 170.666;

cc.canvas.height = 149.333;

のように代入すると、代入するときに JavaScript のシステムのほうで小数点以下が切り捨てられてしまいます。

すると、縦横比は 170 / 149 = 1.140 となり、もとのサイズの縦横比と異なる結果となります。

これが原因で、上記の「これ」リンクで示したサンプルのとおり、グラグラと微妙に動くことになります。

これを何とかしようとして、方程式を立ててみたり、Excel で計算してみたりと、いろいろやったんですが、ダメでした。

小数点以下を切り捨てられてしまうと、数学的には（私の数学の力では）、どうやっても元の縦横比へと修正がききません。

▼モザイクサイズを微妙に（3を2.9にするとか） 増減すればと方程式をたててみて、

▼その解の公式を堂々作りました。しかし、 モザイクサイズに増減値 x を足しても結果は「必ず１」でした

（写真の方程式は縦横比を h / w = 0.875 にしていますが、途中で w / h = 1.142 に変えました）

▼Excel で計算。モザイク大きさを１～変えていくと、CANVASの属性（width, height）へ代入時の小数点切り捨てにより縦横比が変わるところがある（赤塗り）。
また、右端の方程式は役に立たず…

方程式で算出した増減値によりモザイクサイズが必ず１になるなら、たしかに縦横比は維持される結果になるけど、それだと意味ないでしょ。。

方程式がそういう結果を出してくるとは思わなかった orz

で、あきらめて、object-fit という CSS の便利な機能は使わないで、自前でオブジェクトをフィットさせることを考えました。

CSS の object-fit は対象が CANVAS 要素である場合に限り、CANVAS の属性のサイズの拡大縮小を目的とした動的な変更で（そのとき代入時に小数点を切り捨てることが原因で）、縦横比がグラグラと変わる、という問題を持っています。

そこで、object-fit を使わず、

canvas.style.width = "512px";

canvas.style.height = "448px";

としてしまえば、サイズは固定され、グラグラ動きません。

（このあたりはもはや、モザイクの処理であれこれ考えた私の個人的な考察の世界なので、みなさんはついてこれないかもしれませんが…）

そのうえで、モザイク処理として

cc.canvas.width = 170.666;

cc.canvas.height = 149.333;

とやると、前述したように小数点以下が切り捨てられ、縦横比は違うものになるんですが、見た目のサイズとして優先されるのは style のほうのサイズなので、style のサイズに合うように、canvas サイズはピタっと一致してくれます。そのサンプルが、

これ

画面サイズは動きませんが、多分１ピクセルが正方形ではなく縦横に少しゆがんで、それで全体が一致しているんだと思います。

そして、ウィンドウのサイズに合わせて、画面を拡大する方法は、2種類ありまして、

１つは style のサイズを変更する方法。そのサンプルが、

これ

ウィンドウリサイズすると、それに合わせて大きさが変わります。

もうひとつは、CSS の transform : scale() を使用して、要素を拡大します。そのサンプルが、

これ

どちらもまったく同じ動きをしますが、CSS の transform : scale() を変える方法は、canvas の style の margin とかを無視して強制的に拡大するので、扱いにくいかもしれません。（たぶん scale される前のサイズを内部で維持していて、そのサイズを基準に margin などが計算されていると思われる）

また、ウィンドウを最小に近づけると変な動きになったりもするので、CSS の transform : scale() を使用するのはいまいちかも。

最後に、拡大を整数倍限定にするにはどうするかと言うと、プログラム内で CANVAS とその親要素のサイズを比べて算出した拡大率 mul の小数点を切り捨てます。

mul = Math.floor( mul );

これ

2022/5/3（火）

今月の扉絵プログラム

毎月、ページの最初にスクリプトや絵を掲載するつもりでいますが、最近は毎月載せることが出来なくなっています。

今月は久しぶりに JavaScript の掲載です。

JavaScript + CANVAS + bezierCurveTo() + 3DCG計算、による「バネ」です。

そのプログラムリストを下記に掲載します。

「装飾工夫版」は、ページに掲載するためにいろいろ工夫をしたバージョンです。

「工夫なし版」は、その工夫をする前の試作段階のバージョンです。

実行

プログラム内で「びよんせ」がどうのと言った記述が散見されますが、その機能はオフにしてあり、オンにしても動作しません。

「奥であるほど色を少し薄くする」ということを実現するために、スプリングを分割しています（Springクラスのdraw()メソッド内にて）。

工夫なし版では分割していません。

「動きさえすればいい」という気持ちでプログラムしているので、読みづらいと思います。

class App {

constructor( canvas ) {

this.cc = canvas.getContext( "2d" );

//---ここからカスタマイズ

this.cc.canvas.width = 800; //CANVAS解像度

this.cc.canvas.height = 400;

//ドットを強調

if( 1 ) this.cc.canvas.style.imageRendering = "crisp-edges";

//文字列配列は自由に増減して良い

this.sts = [ "びよーん", "びよよよーん", "びよーん", "", "びよんせ" ];

this.stFont = "italic bold 48px ''";

this.s = 100; //焦点距離、レンズサイズ

this.zm = 10; //画面拡大率（3D計算結果に対して）

//--ここまでカスタマイズ

this.springs = new Array();

this.springs.push( new Spring( this, {

r : 255,

rRating : 0,

iKaitenZY : 1,

kaitenZYEn : 1,

kaitenZYPlus : -.02,

ringZoom : 3,

makisu : 10,

posX : -250,

} ) );

this.springs.push( new Spring( this, {

g : 255,

gRating : false,

iKaitenZY : 1,

kaitenZYEn : 1,

kaitenZYPlus : -.02,

ringZoom : 3,

makisu : 10,

posZ : 1500,

} ) );

this.springs.push( new Spring( this, {

b : 255,

bRating : false,

iKaitenZY : 1,

kaitenZYEn : 1,

kaitenZYPlus : -.02,

ringZoom : 3,

makisu : 10,

posX : 250,

} ) );

this.beforeTime = 0;

}

start() {

this.frame( 0 );

}

stop() {

//check.

if( ! this.timerId ) return;

cancelAnimationFrame( this.timerId );

this.timerId = null;

}

frame( nowTime ) {

if( nowTime > this.beforeTime + 100 ) {

this.beforeTime = nowTime;

if( 0 ) {

//文字列について

this.st = this.sts[ Math.floor( Math.random() * this.sts.length ) ];

this.cc.font = this.stFont;

this.textLen = this.cc.measureText( this.st ).width;

this.textXMax = this.cc.canvas.width - this.textLen * 2;

this.textYMax = this.cc.canvas.height - this.textLen * 2;

this.textX = this.textLen / 2 + Math.random() * this.textXMax;

this.textY = this.textLen + Math.random() * this.textYMax;

this.textRotate = - Math.PI / 4 + Math.random() * Math.PI / 2;

}

for( let spring of this.springs ) {

spring.frame();

}

this.draw( this.cc );

}

this.timerId = requestAnimationFrame( this.frame.bind( this ) );

}//frame

draw( cc ) {

cc.fillStyle = "black";

cc.fillRect( 0, 0, cc.canvas.width, cc.canvas.height );

//下部の大きな水色の楕円

if( 0 ) {

cc.beginPath();

cc.ellipse( cc.canvas.width / 2, cc.canvas.height * 0.85, cc.canvas.width * .5, cc.canvas.width * .25, 0, 0, 6.28 );

cc.closePath();

cc.fillStyle = "lightblue";

cc.fill();

}

for( let spring of this.springs ) {

spring.draw( cc );

}

if( 0 ) {

//ビヨンセとか表示

cc.save();

cc.font = this.stFont;

cc.translate( this.textX, this.textY );

cc.rotate( this.textRotate );

cc.fillStyle = "orange";

cc.fillText( this.st, 0, 0 );

cc.strokeText( this.st, 0, 0 );

cc.restore();

}

//画面下部をＷｅｂ ページ題字のためにホワイトアウト

if( 1 ) {

cc.fillStyle = "rgba(0,0,0,.75)";

let rate = 0.82;

cc.fillRect( 0, cc.canvas.height * rate, cc.canvas.width, cc.canvas.height * ( 1 - rate ) );

}

//上部文字表示

cc.fillStyle = "white";

cc.font = "16px ''";

cc.fillText( "JavaScript の「bezierCurveTo()」と「怒涛の3D計算」を組み合わせて「バネ」を表現", 8, 16 );

}//draw

}//App

class Spring {

constructor( app, custom ) {

this.app = app;

//初期回転

this.iKaitenXZ = 0;

this.iKaitenXY = 0;

this.iKaitenZY = 0;

//上から見た図での回転アニメ

this.kaitenXZEn = 0; //回転有効無効

this.kaitenXZPlus = 0.02; //回転量

//横から見た図での回転アニメ

this.kaitenZYEn = 0;

this.kaitenZYPlus = 0.02;

//正面から見た図での回転アニメ

this.kaitenXYEn = 0;

this.kaitenXYPlus = 0.02;

this.nobiMin = .75; //ちぢみ最小

this.nobiMax = 10; //のばし最大

this.nobiPlus = 0.5; //伸び縮みスピード

this.makisu = 10; //ばねの巻き数

this.ringZoom = 3; //ばねの大きさ（拡大率）

this.posX = 0;

this.posY = 0;

this.posZ = 1000; //ばねの3D空間内の位置（奥行前後）

this.r = 128;

this.g = 128;

this.b = 128;

this.rRating = true;

this.gRating = true;

this.bRating = true;

Object.assign( this, custom );

//--ここまでカスタマイズ

//---

this.kaitenXZ = 0;

this.kaitenZY = 0;

this.kaitenXY = 0;

this.textX = 100;

this.textY = 100;

this.textRotate = 0.1;

this.nobiDir = -1;

this.nobi = this.nobiMin;

//ひとまき分のベジェデータ

this.ps = [

//円をたどる点　その１

{ x:23, y:-40, z:0 }, //ベジェハンドル１

{ x:40, y:-23, z:0 }, //ベジェハンドル２

{ x:40, y:0, z:0 }, //ベジェ終点

//円をたどる点　その２

{ x:40, y:23, z:0 },

{ x:23, y:40, z:0 },

{ x:0, y:40, z:0 },

//円をたどる点　その３

{ x:-23, y:40, z:0 },

{ x:-40, y:23, z:0 },

{ x:-40, y:0, z:0 },

//円をたどる点　その４

{ x:-40, y:-23, z:0 },

{ x:-23, y:-40, z:0 },

{ x:0, y:-40, z:0 },

]

}//constructor

frame() {

this.kaitenXZ += this.kaitenXZPlus;

//check.

if( this.kaitenXZ > Math.PI || this.kaitenXZ < 0 ) this.kaitenXZPlus *= -1;

this.kaitenZY += this.kaitenXZPlus;

//check.

if( this.kaitenZY > Math.PI || this.kaitenZY < 0 ) this.kaitenZYPlus *= -1;

this.kaitenXY += this.kaitenXYPlus;

//check.

if( this.kaitenXY > Math.PI || this.kaitenXY < 0 ) this.kaitenXYPlus *= -1;

this.nobi += this.nobiDir * this.nobiPlus;

//check.　のびちぢみ

if( this.nobiDir == 1 && this.nobi >= this.nobiMax

|| this.nobiDir == -1 && this.nobi <= this.nobiMin )

this.nobiDir *= -1;

/*

どのプログラムでも、

もし順方向を 1、逆方向を -1 で判断しているなら、

方向の転換は、その変数に -1 を掛ければ良いです。

順方向だった時：　 1 * -1 = -1　逆方向になった。

逆方向だった時：　-1 * -1 = 1　順方向になった。

これは中学校の数学ですね。

「数学」が苦手な人は、小学校の算数の教科書1年から6年まですべてを

最初から理解しながら勉強していくとよいと思います。

わからないところは、インターネットで検索すれば教えてくれます。

インターネットは遊びの道具として使うなら、大いに応えてくれるし、

インターネットは学びの道具として使うなら、大いに応えてくれます。

私は最近インターネットに対してそんなふうに感じました。

遊びの道具としてだけ使うのはもったいない気がします。

子供のころに習ったものがわからなかった、としても、

大人になってから同じことを学ぶと、理解が進む場合が多くあると思います。

それがねらいどころです。

算数を終えたら、中学校数学を同じように、理解しながら勉強していきます。

そうすれば、上記の -1 * -1 = 1 というのが、

頭で考えるのではなく、実はみんなは（人々は）暗記しているだけなんだ、

というのがわかるかもしれません。

私は実際に、「小学校の算数の教科書1年から6年まですべてを

最初から理解しながら勉強していく」というのをやったわけではないので、

言っていることはいい加減かもしれません。

算数を勉強しなおすことが、どれだけ時間のかかる作業なのか、

どれだけ面倒なことなのかは、私にはわかりません。

でも、数学が苦手な人に対して、どうすればいいかと考えると、

そういう手段が思いつきます。

大人になってから算数、数学を習得して何の得になるのか？

今の仕事と無関係なのに、習得する意味はあるのか？

国語算数理科社会は生活の基本で、生活するうえで、それらが無ければ

いくつかの障害物（いろいろできない）とともに生活しなければならず、

国語算数理科社会という生活の基本があれば、生活上の障害物がなくなり、

生活で得をすることになると思います。

国語算数理科社会をまんべんなく勉強した私は生活の中で

大いに得をしている気がします。

勉強はわからないものがわかったときに「面白い！」と感じます。

「大人になって」「わからなかったものがわかる、面白い！」という２つのねらいどころ

で算数と数学を学ぶと良いんじゃないかと思います。

勉強していて、わからないところにぶつかり、ちょっと考えてもわからないとき

そのことを「自分が頭が悪いから」とか「劣等しているから」と条件反射のように

直感的に思う場面がありますが、そのわからないところは、頭の良い人、優秀な人でも、すぐにはわからないところであって、その人たちは「自分が頭が悪いから」とか「劣等しているから」とは考えずに、「保留」にします。すぐにはわからないことなので、後回しにしたり、周辺の知識をかき集めて知識を補充したりといったことを始めます。

話は長くなりますが、これは絵も同じで、ある程度絵を描ける人が、ちょっといつもと違う趣向の絵を描こうとしたとき、絵を描く自信があるのに、ヘタクソな結果になる場合があります。それはその人が絵が下手なのではなく、絵を描くために必要な資料や趣向の違うその絵を描く経験が足りていないからなんです。なんどもなんども絵を描いているといくつかコツを発見しますが、そのコツを備える前に描くからヘタクソになるんです。

すぐに「自分はダメだ」とは思わずに、小学校の算数や新しい趣向の絵の基本（やれば発見するコツ）をしっかりそろえる。またはそこは誰でもすぐにはわからない部分だとして「保留」にしておくとか、前進ばかりではなく、ぶつかったのなら無理に進もうとせず迂回路を取ることも必要です。

（以上考えて言っているだけなので、繰り返しになりますがいい加減かもしれません）

*/

}//frame

draw( cc ) {

cc.save();

cc.translate( cc.canvas.width / 2, cc.canvas.height / 2 );

cc.scale( 1, -1 );

cc.shadowColor = "white";

cc.shadowBlur = 10;

let lenZ = this.nobi * 3 * 4 * this.makisu; //のびきったときの長さ

// * 3 は下記 abc ごとにzを増やしている分

// * 4 は下記 for j の回数分

let minZ = this.posZ - lenZ / 2; //ばねのz方向の手前側端点位置。posZはばねの中心となる

let z = minZ;

for( let i = 0; i < this.makisu; i++ ) {

cc.beginPath();

z -= this.nobi; //←試行錯誤でやったので、作者もこの計算の意味を知らない

let p = this.d( Object.create( this.ps[ 11 ] ), z );

cc.moveTo( p.h, p.v );

//４点をたどり、円を１つ描く。a,bはベジェのハンドル、cはベジェの終点

for( let j = 0; j < 4; j++ ) {

let a = this.d( Object.create( this.ps[ j * 3 ] ), z ); //このd()が3D計算を行っている

z += this.nobi; //createでコピーしたほうをいじること

let b = this.d( Object.create( this.ps[ j * 3 + 1 ] ), z );

z += this.nobi; //ベジェのパラメタごとにzをずらして

let c = this.d( Object.create( this.ps[ j * 3 + 2 ] ), z ); //それでいいのか？？

z += this.nobi;

//check.　不正描画軽減

if( a.z <= 0 || b.z <= 0 || c.z <= 0 ) continue;

cc.bezierCurveTo( a.h, a.v, b.h, b.v, c.h, c.v );

}

//遠近の度数

let rate = ( p.z - minZ ) / lenZ;

//線の太さの遠近感

if( 1 )

cc.lineWidth = 3 + 5 * ( 1 - rate );

//色の遠近感あり

let r = this.r * ( this.rRating ? rate : 1 );

let g = this.g * ( this.gRating ? rate : 1 );

let b = this.b * ( this.bRating ? rate : 1 );

cc.strokeStyle = "rgb(" + r + "," + g + "," + b +")";

cc.stroke();

}//for

cc.restore();

}//draw

d( p, z ) {

//円の大きさを拡大している

p.x *= this.ringZoom;

p.y *= this.ringZoom;

p.x += this.posX;

p.y += this.posY;

//3D空間内で回転

let res;

//xy平面で回転（正面から見た図で回転）

res = this.kaiten2( this.posX, this.posY, p.x, p.y, this.iKaitenXY + this.kaitenXYEn * this.kaitenXY );

p.x = res.X;

p.y = res.Y;

//zy平面で回転（横から見た図で回転）

res = this.kaiten2( this.posZ, this.posY, z, p.y, this.iKaitenZY + this.kaitenZYEn * this.kaitenZY );

z = res.X;

p.y = res.Y;

//xz平面で回転（上から見た図で回転）

res = this.kaiten2( this.posX, this.posZ, p.x, z, this.iKaitenXZ + this.kaitenXZEn * this.kaitenXZ );

p.x = res.X;

z = res.Y;

return {

h : p.x * ( this.app.s / z ) * this.app.zm, //3D座標を2D座標にする計算

v : p.y * ( this.app.s / z ) * this.app.zm,

z : z, //上記

//「//check.　不正描画軽減」と、

//「//遠近の度数」で使いたいのでzも入れておく。

}

}//d

kaiten2( centerX, centerY, x, y, theta2 ) {

//数学の三角関数による座標回転計算

x -= centerX;

y -= centerY;

let theta1 = Math.atan2( y, x );

let hankei = Math.sqrt( x * x + y * y );

let kaitenX = Math.cos( theta1 + theta2 ) * hankei;

let kaitenY = Math.sin( theta1 + theta2 ) * hankei;

kaitenX += centerX;

kaitenY += centerY;

return { X : kaitenX, Y : kaitenY }

}//kaiten2

}//Spring

//check.

if( ! window.apps ) {

apps = new Array();

}

addEventListener( "load", function() {

app = new App( document.getElementById( "bezierTest" ) );

apps.push( app );

} );

実行

装飾版に比べてだいぶシンプルです。

プログラムを実行すると、青文字で start と書かれた場所から、赤文字で end と書かれた場所まで、CANVAS の beginPath(), closePath() による一本の描画パスでバネが描かれます。

bezierCurveTo() を使用してばねの曲線を描いていますが、どういうわけか 3D 空間を感じさせるような結果になっています。

2D描画専用のはずの bezierCurveTo() ですが、 bezierCurveTo() にセットする変数が「 3D 計算された値」ならば描くものは 3D になるんです。

これは bezierCurveTo() が 3D に対応しているということではなく、点の位置やベジェのハンドルの位置を 3D 空間内で計算し、それを 2D に投影したときの座標を bezierCurveTo() の引数に与えると、意図した 3D の様子を描いてくれる、というわけです。

別の話ですが、通常（私は）、3DCG の計算を行うときは、すべての点を 3DCG 計算済にしてから、描画処理に入るようにしていますが、今回に限っては、その「点」を描画する直前にその点だけについて個別に 3DCG 計算を行うようにしています。（ d() 関数）

これは、

• スプリングは円形状を繰り返す特殊な形をしていて、そのデータは円形状１つ分だけにしたい。
  つまりスプリングの巻き数が100回だからと言って、100個の円データを作りたくないと思った。
• アニメーションする。

など考えた結果です。それで良かったかどうかはわかりません。おかしな感じになったなぁと思います。（draw() 関数内の for 文、120~150行付近）

<html><!--ESCAPEPROCESS-->

<head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type">

<script>

console.clear();

// onclick = function() { location.reload( true ) }

// ondblclick = function() { location.assign( "https://192.168.11.3" +

</script>

<script>

presetNum = 0; //おまけ機能用

function onloadx() {

cc = document.getElementById( "test" ).getContext( "2d" );

cc.canvas.width = 512;

cc.canvas.height = 448;

//おまけ機能　「クリックすると撮影方法を変える」

onclick = function() {

presetNum ++;

presetNum %= 3; //値を0～2に直す計算

onloadx();

}

//---ここから　カスタマイズ

nobiMin = 0.5; //ばねのちぢみ限度0～

nobiMax = 10; //ばねののばし限度10や20等

nobiPlus = 0.2; //のびちぢみ速度0.2や1等

makisu = 10; //ばね巻き数1～

ringZoom = 2; //ばねの大きさ0.5～5程度

//---ここまで　カスタマイズ

//おまけ機能処理

//3DCGパラメタはプリセットを選べるようにしてみました。

switch( presetNum ) {

case 0:

presetName = "スナップ写真（立体感ほどほど）";

s = 30; //3DCG 焦点距離、レンズサイズmm

posZ = 1000; //3DCG ばねの位置（奥行）

zm = 30; //3DCG 引き伸ばし

break;

case 1:

presetName = "迫力（立体感強い）";

s = 5;

posZ = 600;

zm = 100;

break;

case 2:

presetName = "望遠（立体感少ない）";

s = 200;

posZ = 6000;

zm = 30;

break;

}

kaitenXZ = 0;

nobi = 1;

nobiDir = 1;

beforeTime = 0;

frame( 0 );

}

function frame( nowTime ) {

if( nowTime > beforeTime + 100 ) {

beforeTime = nowTime;

kaitenXZ += 0.02;

nobi += nobiDir * nobiPlus;

//check.

if( nobiDir == 1 && nobi >= nobiMax

|| nobiDir == -1 && nobi <= nobiMin ) {

nobiDir *= -1;

}

draw( cc );

}

requestAnimationFrame( frame );

}

function draw( cc ) {

//画面クリア

cc.fillStyle = "white";

cc.fillRect( 0, 0, cc.canvas.width, cc.canvas.height );

//おまけ機能状態表示

cc.fillStyle = "black";

cc.fillText( "クリックまたはタッチすると撮影方法を変えます", 10, 10 );

cc.fillStyle = "blue";

cc.fillText( "プリセット：" + presetName, 10, 25 );

cc.save();

cc.translate( cc.canvas.width / 2, cc.canvas.height / 2 );

ps = [

//円を形作る上下左右の4点のうち上点から右点への曲線

{ x:23, y:-40, z:0 }, //ベジェ第１引数　ハンドル

{ x:40, y:-23, z:0 }, //ベジェ第２引数　ハンドル

{ x:40, y:0, z:0 }, //ベジェ第３引数　終点

//円を形作る上下左右の4点のうち右点から下点への曲線

{ x:40, y:23, z:0 }, //なお、この z:0 は使っていません

{ x:23, y:40, z:0 }, //別の z 値を使っています

{ x:0, y:40, z:0 },

//円を形作る上下左右の4点のうち下点から左点への曲線

{ x:-23, y:40, z:0 },

{ x:-40, y:23, z:0 },

{ x:-40, y:0, z:0 },

//円を形作る上下左右の4点のうち左点から上点への曲線

{ x:-40, y:-23, z:0 },

{ x:-23, y:-40, z:0 },

{ x:0, y:-40, z:0 },

]

cc.beginPath();

z = posZ - nobi * 3 * 4 * makisu / 2;

// * 3 はベジェのパラメタ下記abc3つ分

// * 4 は円を形作る点4つ分

//posZが中心となるようなzの初期値を求めている。

//パス描画開始は円を形作る上下左右の4点のうち上点の位置（ps[ 11 ]）から始めて、

p = d( Object.create( ps[ 11 ] ), z );

//配列の要素（ps[ 11 ] = オブジェクト）をそのまま渡すと

//参照渡しになり、d()関数がマスターデータのpsを

//書き換えてしまうので、createでコピーを渡す。

cc.moveTo( p.h, p.v );

//開始点を示すガイド表示

cc.fillStyle = "blue";

cc.fillRect( p.h - 2, p.v - 2, 4, 4 );

cc.fillText( "start", p.h, p.v );

//そのあとはzをずらしながらグルグルとやっていく。

let a, b, c;

for( let i = 0; i < makisu; i++ ) {

for( let j = 0; j < 4; j++ ) {

a = d( Object.create( ps[ j * 3 ] ), z );

z += nobi;

b = d( Object.create( ps[ j * 3 + 1 ] ), z );

z += nobi;

c = d( Object.create( ps[ j * 3 + 2 ] ), z );

z += nobi;

cc.bezierCurveTo( a.h, a.v, b.h, b.v, c.h, c.v );

//パラメタごとにz値をずらしているのは

//それが理屈で正しいからではなく、

//適当で結果オーライでやっています。

//でもzが少しずつずれているハンドルの様子を想像してみると

//きれいな曲線を作りそうな気がします。

}

}

cc.strokeStyle = "black";

cc.stroke();

//終了点を示すガイド表示

cc.fillStyle = "red";

cc.fillRect( c.h - 2, c.v - 2, 4, 4 );

cc.fillText( "end", c.h, c.v );

cc.restore();

}//draw

function d( p, z ) {

p.x *= ringZoom;

p.y *= ringZoom;

//xz平面で回転

let res = kaiten2( 0, posZ, p.x, z, kaitenXZ );

p.x = res.X;

z = res.Y;

return {

h : p.x * ( s / z ) * zm,

v : p.y * ( s / z ) * zm,

}

}

function kaiten2( centerX, centerY, x, y, theta2 ) {

//数学の三角関数による座標回転計算

x -= centerX;

y -= centerY;

let theta1 = Math.atan2( y, x );

let hankei = Math.sqrt( x * x + y * y );

let kaitenX = Math.cos( theta1 + theta2 ) * hankei;

let kaitenY = Math.sin( theta1 + theta2 ) * hankei;

kaitenX += centerX;

kaitenY += centerY;

return { X : kaitenX, Y : kaitenY }

}//kaiten2

</script>

<style>

</style>

</head>

<body onload="onloadx()">

<canvas id="test" style="

object-fit : contain;

width : 100%;

height : 100%;

">

</canvas>

</body>

</html>

近況

今年2022年、3月14日に突然身体が不調になる。具体的には、身体がフラフラとし、息切れがひどい。大企業に派遣されて働いているが、バターンと倒れては困るので、そうなる前に欠勤して休むことにした。

症状が直らないので、3月中頃から「休職」とした。契約社員以上、正社員以下の準社員ではあるけど、時給で働いているので、休職＝収入ストップ。貯金が無くなると生活できなくなる。

身体の不調とは別件で（もしかしたら関連している？）、4月末に耳鼻科の手術で4日間入院。

鼻の奥を綺麗に洗浄したり滅菌したりしたわけだけど、退院後、いまいち鼻の調子が良くないけど、直ったんだろうか？？と疑問に思っている。

ちなみに鼻は元は歯医者で上の歯を抜歯した際に抜歯の穴と鼻の奥の空洞が貫通してしまい、口の中の雑菌が鼻の中へ侵入してその症状になってしまった。歯性上顎洞炎という病名だが、わかりやすく言うと副鼻腔炎、もっとわかりやすく言うと蓄膿症。

生命保険には２つ入っているので、入院手術費用は何とかなる。

問題は休職による収入ストップだが、身体の検査を一通り行い、異常がないので、あとは。ということで心療内科にかかる。

心療内科で国の制度の「傷病手当」の申請をお願いしたところ OK となったので、収入の問題は、（まだ心配ではあるけど）一応、なんとかなったと言えそう。

で、毎日働かず、部屋で遊んでばかりいると、将来まずいことになる気がするので、社会に対しては「ガンバリ」を見せなければならないと思い、電子機器組立て1級の受験の準備を始めた。しかしなんと！！！

なんと！！！

…写真は関係ないんですけど、なんと、合格していたと思っていた「1級学科」が、合格取り消しになってしまった。

受検には受験資格というものがあり、「2級合格後、3年実務に従事したのち、1級を受検できる」という条件が設定されていて、私はそれに気づかず、2年半くらいで受検申請してしまい、受け付けた国も資格がないことに気付かず、受検票を発行してしまい、学科と実技の試験を私は受けてしまったんです。実技はダメでしたが、学科は合格。それが3年くらい前の話です。そして今回、事務の方が初めて気が付いて、いろいろ話し合った結果「学科合格取り消し」となったわけでした。

で、今学科と実技を両方、せっせと鍛えているところです。

上の写真は私が自分で作成した電子機器組立て用の練習基板です。IC や抵抗のはんだ付けだけを試せる基板で、回路はダミー（意味なし）です。「サンハヤト」という会社が、個人で基板を生成するツール一式を販売していて、私はそれを購入して使っています。回路を透明シートに印刷し、銅箔だけの基板にシート越しに紫外線を当て、化学反応を起こし、その基板を、溶液に浸すと不要な銅箔が溶け、回路の銅箔だけが残る、という「エッチング」という方法で基板を作るものです。一式そろえると5万円くらいするものですが、当時の会社でもらったボーナスで購入しました。6年以上前の話です。

趣味のプログラミングのほうは、その「電子機器組立て」の試験で、基板の配線を自分で設計するという試験問題があり、それを実物の基板なしでパソコン上で配線を試せる、というソフトウェアを作ろうとしています。

これがそのソフトウェアの開発中の画面です。

基板上に載っている黒い長方形の IC の一番左上の小さな灰色の端子と、基板上のたくさん並んだ黄色いランド（はんだ付けする小さな銅箔）の１つは、データとしてつながりがあります。ワイヤー（軟銅線）で部品の端子同士を接続し、最終的に正しい接続が行われているかどうかチェックを行うことができます。

まぁ、そんなことやって時間を取ってしまい、練習時間の不足で不合格になると大変なので、なるべく手短に仕上げたいと思っているところです。

ところで、ちょっと暇があれば、「はじめて読む486」の本も読み進めていて、もうすぐ読み終わりそう。「仮想８６モード」の章を読み終えることが出来れば、「ＰＣ－９８０１スーパーテクニック」という本に載っていた、ＣＰＵ判別プログラムで、「今、仮想８６モードです」と結果を出すところを見られると思うんです。それが１つの大きな目的で…

そしてさらに、今月のこのＷｅｂ ページの扉絵のビヨヨンのバネのプログラムを思い付きで作ったり、RPG のメニューのプログラムとかも進めたいんですが、そんなことやってると合格なんかできませんよ、と。

心療内科でもらった薬がちょっと「夢うつつ」になる感じがちょっとあって、それだといろいろ進められないんじゃないか、と心配しています。

それとは別件で、老化のせいか、頭の回転もだいぶ鈍っていて、昔やっていたことが今では2倍の時間をかけて行っている始末。それも今まで頑張って仕事に従事して、（笑い話ですが）残業300時間の世界を通り抜けて、なんとか耐えてきた結果（社会につくした結果）なのだと思えば、理解できるようなできないような。

とまぁ、以上、何一つ隠していない、私の完ぺきな近況でした。

さて、学科の勉強を始めるとしよう。はりきっていきましょうね。

（訪問者のどんなニーズと この記事がつながるか）

• 日記を読みたい